<template>
    <div class="px">
        <el-card style="width: 800px;margin: 0 auto;">
            <div slot="header" class="clearfix">
                <i class="el-icon-tickets"></i>
                考试答题卷(已考)
            </div>
            <div>
                <h2>总分： {{score}} 分</h2>
            </div>
            <div style="margin: 15px 0;text-align: right">
                <span style="font-size: 12px;color: darkgrey;">试卷编号：{{$route.query.id}}</span>
                &emsp;
                <span style="font-size: 12px;color: darkgrey;">总题数：{{testPaper.length}}</span>
                &emsp;
                <el-button type="" size="mini" icon="el-icon-printer" @click="print">打印试卷</el-button>
                <el-button type="primary" @click="goBack"
                           size="mini" icon="el-icon-arrow-left">返回
                </el-button>
            </div>
            <div ref="printTestPaper">
                <el-form
                        v-for="(item,index) in testPaper"
                        :key="item.id"
                        :inline="false"
                        label-position="right"
                        label-width="10px">
                    <el-card class="box-card" style="margin-top: 15px">
                        <div slot="header" class="clearfix">
                            <h4>第{{index+1}}题：</h4>
                        </div>
                        <el-form-item :style="{width: '100%'}">
                            {{item.subject}}
                        </el-form-item>

                        <el-form-item v-if="item.type===1" :style="{width: '100%'}">
                            <el-radio-group v-model="item.questionOption.rightKey" class="option-radio">
                                <div class="option-item-radio">
                                    <el-radio :label="'a'">A. {{item.questionOption.optionA}}</el-radio>
                                </div>
                                <div class="option-item-radio">
                                    <el-radio :label="'b'">B. {{item.questionOption.optionB}}</el-radio>
                                </div>
                                <div class="option-item-radio">
                                    <el-radio :label="'c'">C. {{item.questionOption.optionC}}</el-radio>
                                </div>
                                <div class="option-item-radio">
                                    <el-radio :label="'d'">D. {{item.questionOption.optionD}}</el-radio>
                                </div>

                            </el-radio-group>
                        </el-form-item>

                        <el-form-item v-if="item.questionFillBlank!=null&&item.type!==5"
                                      :style="{width: '100%'}">
                            {{item.questionFillBlank.answer}}
                        </el-form-item>


                        <el-form-item v-if="item.type===2" :style="{width: '100%'}">
                            <div class="option-item">
                                <el-checkbox :checked="item.questionOption.rightKey.indexOf('a')!==-1" @change="chooseA"
                                             :label="item.questionOption.optionA">
                                    A. {{item.questionOption.optionA}}
                                </el-checkbox>
                            </div>
                            <div class="option-item">
                                <el-checkbox :checked="item.questionOption.rightKey.indexOf('b')!==-1" @change="chooseB"
                                             :label="item.questionOption.optionB">
                                    B. {{item.questionOption.optionB}}
                                </el-checkbox>
                            </div>

                            <div class="option-item">
                                <el-checkbox :checked="item.questionOption.rightKey.indexOf('c')!==-1" @change="chooseC"
                                             :label="item.questionOption.optionC">
                                    C. {{item.questionOption.optionC}}

                                </el-checkbox>
                            </div>
                            <div class="option-item">
                                <el-checkbox :checked="item.questionOption.rightKey.indexOf('d')!==-1" @change="chooseD"
                                             :label="item.questionOption.optionD">
                                    D. {{item.questionOption.optionD}}
                                </el-checkbox>
                            </div>
                        </el-form-item>

                        <el-form-item v-if="item.questionJudgment!=null" :style="{width: '100%'}">
                            <el-radio-group v-model="item.questionJudgment.rightKey">
                                <el-radio label="T">A. 对</el-radio>
                                <el-radio label="F">B. 错</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-divider/>
                        <el-form-item class="text">

                            <div style="color: #2ecc71;font-weight: bold" v-if="answerData[index].trueFalse===1">
                                <i class="el-icon-check"></i>
                                回答正确！
                            </div>
                            <div v-if="answerData[index].trueFalse===2">
                                <div style="color: #ff2800;font-weight: bold">
                                    <i class="el-icon-close"></i>
                                    回答错误！
                                </div>
                                <div>
                                    <span style="color: darkgrey;">你的答案：</span>
                                    <span v-if="answerData[index].exameeErrorAnser!==null&&item.type!==4">
                                          {{answerData[index].exameeErrorAnser.toUpperCase()}}
                                    </span>
                                    <!--判断题-->
                                    <span v-if="answerData[index].exameeErrorAnser!==null&&item.type===4">
                                          {{answerData[index].exameeErrorAnser.toUpperCase()==="T"?"A":"B"}}
                                    </span>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item v-if="item.type===1" class="text">
                            <span style="color: darkgrey;">答案解析：</span> {{item.questionOption.explain}}
                        </el-form-item>
                        <el-form-item v-if="item.type===2" class="text">
                            <span style="color: darkgrey;">答案解析：</span>{{item.questionOption.explain}}
                        </el-form-item>
                        <el-form-item v-if="item.type===4" class="text">
                            <span style="color: darkgrey;">答案解析：</span>{{item.questionJudgment.explain}}
                        </el-form-item>
                    </el-card>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {queryByTypeCode} from "@/api/dictionary";
    import {selfTestPaperQuery} from "@/api/examination";

    export default {
        data() {
            return {
                testPaper: [],
                answerData: [],
                score: 0,
                arr: [],
                questionType: [],
            }
        },
        mounted() {
            this.getData(this.$route.query.id);
        },
        methods: {
            async getData(id) {
                let resp = await queryByTypeCode("question_type")
                this.questionType = resp.data
                resp = await selfTestPaperQuery(id);
                this.testPaper = resp.data.data.questionList
                this.answerData = resp.data.data.answerList
                this.score = resp.data.score
            },
            goBack() {
                this.$router.go(-1)
            },
            async print() {
                await this.$print(this.$refs.printTestPaper)
            },
            chooseA(selected) {
                if (selected) {
                    this.arr['a'] = 'a';
                } else {
                    delete this.arr['a']
                }
            },
            chooseB(selected) {
                if (selected) {
                    this.arr['b'] = 'b';
                } else {
                    delete this.arr['b']
                }
            },
            chooseC(selected) {
                if (selected) {
                    this.arr['c'] = 'c';
                } else {
                    delete this.arr['c']
                }
            },
            chooseD(selected) {
                if (selected) {
                    this.arr['d'] = 'd';
                } else {
                    delete this.arr['d']
                }
            },

        }
    }
</script>

<style scoped lang="scss">
    h4 {
        margin: 0;
    }

    .el-form-item {
        margin: 0;
    }

    .option-radio {
        padding-top: 15px;

        .option-item-radio {
            margin: 0 5px 15px;

        }
    }

    .option-item {
        margin: 0 5px 0;
    }
</style>